<template>
  <div>
    <van-nav-bar
        title="活动室预约"
    />
    <van-field
        v-model="activityRoomApplication.theme"
        label="活动主题"
        placeholder="请输入活动名称" />
    <van-field label="活动人数">
      <template #input>
        <van-stepper v-model="activityRoomApplication.number" />
      </template>
    </van-field>
    <van-field
        readonly
        clickable
        name="calendar"
        :value="activityRoomApplication.dateValue"
        label="日期"
        placeholder="点击选择日期"
        @click="showCalendar = true"
    />
    <van-calendar v-model="showCalendar" @confirm="onConfirm"/>

    <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="activityRoomApplication.timeValue"
        label="时间"
        placeholder="点击选择时间"
        @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
          title="选择时间"
          show-toolbar
          v-model="activityRoomApplication.timeValue"
          type="time"
          :min-hour="10"
          :max-hour="20"
          @confirm="onTimeConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>
    <div style="margin: 16px;">
      <van-button round block type="info" @click="onSubmit">提交</van-button>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";
import {createActivityRoomApplication} from "../../api/activityRoomApplication";

export default {
  name: "Form",
  data() {
    return {
      active: 0,
      theme: '',
      number: '',
      dateValue: '',
      timeValue: '',
      sessionsValue: '',
      showCalendar: false,
      showPicker: false,
      activityRoomApplication: {},
      submitButtonDisabled: false
    };
  },
  methods: {
    onConfirm(date) {
      console.log(date)
      this.activityRoomApplication.dateValue = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      this.showCalendar = false;
    },
    onTimeConfirm(value) {
      console.log(value);
      this.activityRoomApplication.timeValue = value;
      this.showPicker = false;
    },
    // onChange(picker, values) {
    //   //picker.setColumnValues(1, this.sessions[values[0]]);
    // },
    onSubmit() {
      createActivityRoomApplication({
        theme: this.activityRoomApplication.theme,
        number: this.activityRoomApplication.number,
        date: this.activityRoomApplication.dateValue,
        time: this.activityRoomApplication.timeValue,
      }).then((response) => {
        if(response.data.code === 200) {
          Toast.success('提交成功');
          this.submitButtonDisabled = true
        }
      })
    },
    filter(type, options) {
      if (type === 'hour') {
        return options.filter((options) => (options >= 9) && (options <= 17))
      }
      if (type === 'minute') {
        return options.filter((option) => option % 120 === 0);
      }
      return options;
    },
    onNext() {
      this.step = 1
    }
  },
}
</script>

<style scoped>

</style>